<template>
  <el-form ref="ruleFormRef" :model="formData" :rules="rules" id="printBox">
    <div v-for="(element, index) in formConfig" :key="index">
      <!-- 日期相关 -->
      <!-- && formData.value[element.id] -->
      <div v-if="element.type === 'date'">
        <!-- 年-月-日 -->
        <!-- prop="parentDateValue" -->
        <el-form-item :prop="element.id">
          <ElementComps
            :formData="formData[element.id]"
            @update:form-data="
              (value) => {
                formData[element.id] = value;
                ruleFormRef?.validateField(element.id); // 触发校验
              }
            "
            :element="element"
          >
          </ElementComps>
        </el-form-item>
      </div>

      <div v-else-if="element.type === 'date-range'">
        <el-form-item :prop="element.id">
          <ElementComps
            :formData="formData[element.id]"
            @update:form-data="
              (value) => {
                formData[element.id] = value;
                ruleFormRef?.validateField(element.id); // 触发校验
              }
            "
            :element="element"
          >
          </ElementComps>
        </el-form-item>
      </div>

      <div v-else-if="element.type === 'time'">
        <el-form-item :prop="element.id">
          <ElementComps
            :formData="formData[element.id]"
            @update:form-data="
              (value) => {
                formData[element.id] = value;
                ruleFormRef?.validateField(element.id); // 触发校验
              }
            "
            :element="element"
          >
          </ElementComps>
        </el-form-item>
      </div>

      <div v-else-if="element.type === 'time-range'">
        <el-form-item :prop="element.id">
          <ElementComps
            :formData="formData[element.id]"
            @update:form-data="
              (value) => {
                formData[element.id] = value;
                ruleFormRef?.validateField(element.id); // 触发校验
              }
            "
            :element="element"
          >
          </ElementComps>
        </el-form-item>
      </div>
      <!-- 图片/文件相关 -->
      <div
        v-else-if="
          ['upload-picture', 'upload-file', 'section'].includes(element.type)
        "
      >
        <el-form-item :prop="element.id">
          <ElementComps
            :formData="formData[element.id]"
            @update:form-data="
              (value) => {
                formData[element.id] = value;
                ruleFormRef?.validateField(element.id); // 触发校验
              }
            "
            :element="element"
          />
        </el-form-item>
      </div>

      <!-- 数字/金额相关 -->
      <div v-else-if="['number', 'amount'].includes(element.type)">
        <el-form-item :prop="element.id">
          <ElementComps
            :formData="formData[element.id]"
            @update:form-data="
              (value) => {
                formData[element.id] = value;
              }
            "
            @inputBlur="handleCountChange(formData, element)"
            :element="element"
          />
        </el-form-item>
      </div>

      <!-- 通用 -->
      <div v-else-if="element.type === 'layout'">
        <!-- <el-form-item :prop="element.id"> -->
          <ElementComps
            v-model:formData="formData[element.id]"
            :element="element"
          />
        <!-- </el-form-item> -->
      </div>
      <!-- 通用 -->
      <div v-else>
        <el-form-item :prop="element.id">
          <ElementComps
            v-model:formData="formData[element.id]"
            :element="element"
          />
        </el-form-item>
      </div>
    </div>
  </el-form>
  <!-- <el-button @click="getData(ruleFormRef)">获取数据</el-button>
  <el-button v-print="print">点击打开打印预览</el-button> -->
</template>

<script setup>
import { ref, onMounted, toRefs } from "vue";
import { ElMessage } from "element-plus";
//import { FormInstance } from 'element-plus'
import { useStore } from "vuex";
import ElementComps from "./ElementComps.vue";
import { makeRange, computedDateRangeM } from "../../../../utils";
/* ts类型定义区域 */
const store = useStore();
/* 定义数据区域 */
// 有数据时为预览表单
const props = defineProps(["currentItem", "formData"]);

const { formData } = toRefs(props);
// const formData = ref({});
const rules = ref({});
const ruleFormRef = ref();
const backupConfig = ref([]);
const formConfig = ref([]);

//这里是打印的配置项
const print = ref({
  id: "printBox", //这里的id就是上面我们的打印区域id，实现指哪打哪
  popTitle: "配置页眉标题", // 打印配置页上方的标题
  extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: "预览的标题", // 打印预览的标题
  previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log("正在加载预览窗口！");
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log("已经加载完预览窗口，预览打开了！");
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    console.log("开始打印之前！");
  }, // 开始打印之前的callback
  openCallback() {
    console.log("执行打印了！");
  }, // 调用打印时的callback
  closeCallback() {
    console.log("关闭了打印工具！");
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log("点击v-print绑定的按钮了！");
  },
});

/* 事件处理区域 */
// 数值/金额边界判断处理
const handleCountChange = (formData, element) => {
  const number = +formData[element.id];

  if (isNaN(number)) {
    ElMessage.error(`请输入数字`);
    formData[element.id] = null;
    return;
  }

  if (
    (number && element.maxValue && number > element.maxValue) ||
    (element.minValue && number < element.minValue)
  ) {
    ElMessage.error(`请输入${element.placeholder}的值`);
    formData[element.id] = null;
  }
};

// 初始化表单数据
const initFormData = () => {
  // 备份配置（防止直接修改源对象数据，视情况要求而定）
  backupConfig.value = JSON.parse(JSON.stringify(formConfig.value));

  console.log("初始化表单数据----------->", JSON.stringify(formData.value));
  backupConfig.value.forEach((item) => {
    console.log("item----------->", item.id);
    //formData.value[item.id] = item.options.defaultValue;
    rules.value[item.id] = item?.options?.rulesConfig?.rules;
    console.log("formData----------->", JSON.stringify(formData.value));
    console.log("formData.value[item.id]----------->", formData.value[item.id]);
  });
};

// 获取表单数据
const getData = () => {
  return new Promise((resolve, reject) => {
    ruleFormRef.value?.validate((valid) => {
      if (valid) {
        console.log("submit!", JSON.stringify(formData.value));
        resolve(formData.value);
      } else {
        console.log("error submit!");
        reject(false);
      }
    });
  });
};

defineExpose({ getData });

/**
 * 日期区间相关
 */
// 计算开始时间到结束时间的时长
const computedDateRange = (element) => {
  computedDateRangeM(element, formData);
};

// 日期区间时间选择器禁用掉的时间（用于禁掉起始时间的判断）
const disabledHours = () => {
  // 父时间相等时才能进行子时间的判断
  if (
    !!formData.value.beginParentDateValue &&
    formData.value.beginParentDateValue === formData.value.endParentDateValue
  ) {
    const H = formData.value.beginChildDateValue.split(":")[0];
    return makeRange(0, H - 1);
  }
};

const disabledMinutes = (hour) => {
  const H = formData.value.beginChildDateValue.split(":")[0];
  const m = formData.value.beginChildDateValue.split(":")[1];

  // 父时间相等时才能进行子时间的判断
  if (
    !!formData.value.beginParentDateValue &&
    formData.value.beginParentDateValue === formData.value.endParentDateValue
  ) {
    if (hour === +H) {
      return makeRange(0, +m);
    }
  }
};

/* 监听 */

/* 生命周期 */
onMounted(() => {
  console.log("------------------", JSON.stringify(store.state.form.config));
  if (props.currentItem?.length) {
    formConfig.value = props.currentItem;
  } else {
    formConfig.value = store.state.form.config;
  }
  console.log("formConfig", JSON.stringify(formConfig.value));
  initFormData();
});
</script>

<style lang="less" scoped>
.title {
  display: inline-block;
  margin-bottom: 8px;
  .require-icon {
    position: relative;
    &::after {
      content: "*";
      position: absolute;
      left: 100%;
      top: -2px;
      line-height: 20px;
      padding-left: 2px;
      color: #f54a45;
    }
  }
}
</style>
